<template>
  <div>
    <div class="label">
      <!-- slici() -->
      <span @click="showPopup" v-for="item in label.slice(0,1)" :key="item">{{ item.userTabel }}</span>
    </div>
    <van-popup v-model:show="show" position="bottom"   closeable :style="{ height: '30%' }"   round >
      <div v-for="item in timi.slice(0,1)" :key="item" class="boxb">
            {{ item.labelDetails }}
        </div>
    </van-popup>

  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {GetUsertaglist,GetUsertag} from '../api/my'
const label=ref([])
const show = ref(false);
const timi = ref([])

//获取标签详情
const getuserlabel = async (userTabel) => {
  let articleauthor = JSON.parse(localStorage.getItem("user"))._id
  let data = await GetUsertag(articleauthor, userTabel)
  const { resultCode, resultInfo } = data
  if (resultCode == 1) {
    timi.value = resultInfo
    console.log(timi.value);
  } else {
    alert(resultInfo)
  }
}
const showPopup = () => {//改变show的值控制显示隐藏
      show.value = true;
      getuserlabel()
    };
//获取标签
const getusertag =async()=>{
  let articleauthor = JSON.parse(localStorage.getItem("user"))._id
let data=await GetUsertaglist(articleauthor)
let {resultCode,resultInfo}=data
if(resultCode==1){
label.value=resultInfo
}
}
onMounted(()=>{
  getusertag()
})
</script>
<style scoped lang="scss">
 .label{
  background-color: rgb(243, 243, 243);
  width: 20vw;
  height: 4vh;
  border-radius: 10%;
  span{
    line-height: 4vh;
    font-size: 1rem;
  }
}
</style>